<template>
  <div class="movie">
    <h1>我想看的电影的名字必须是4-6的长度</h1>
    <ul>
      <li v-for="movie in myMovieList" :key="movie.tvId">
        {{ movie.albumName }}
      </li>
    </ul>
    <hr />
    <h1>我想看的电影名字必须是我传递的长度</h1>
    <ul>
      <li v-for="movie in yourMovieList" :key="movie.tvId">
        {{ movie.albumName }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: "Movie",
  mounted() {
    console.log(mapGetters('count',['myMovieList','yourMovieList']));
  },
  computed: {
    ...mapGetters('count',['myMovieList']),
   /*  myMovieList() {
      return this.$store.getters.myMovieList;
    }, */
    //因为getter返回的如果是一个函数的话,我们可能需要传参,就不要使用mapGetters
    yourMovieList() {
      //当getters中的计算属性值是一个函数的时候,就需要在使用的时候调用
      //但是这样就可以传递参数了
      //getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果
      console.log(this,'oo');
      return this.$store.getters['count/yourMovieList']({ start: 2, end: 4 });
    },
  },
};
</script>

<style>
.movie {
  background: pink;
  margin: 30px;
}
</style>